<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>产品详细</title>
		<link rel="stylesheet" type="text/css" href="/css/base.css" />
		<link rel="stylesheet" type="text/css" href="/css/product.css" />
		<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/jquery.imagezoom.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/product.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/search.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="container">
			<!--设置整个页面居中，需要设定margin并且需要设定width宽度-->
			<!--应用网页模板-->
			<% include ../template/header.html %>
			<!--导航-->
			<!--内容开始-->
			<div id="content">
				<!--链接导航-->
				<div class="Navigation">
					您当前的位置： 首页 > 美妆个护 > 护肤美容 > 面膜 >xxx产品
				</div>
				<!--产品详细-->
				<div id="main">
					<!--商品详细-->
					<div class="page-maincontent">
						<div id="product_container" class="clearfix">
							<!--产品左边的图片展示-->
							<div class="product_side">
								<!--相册商品-->
								<div id="product_album">
									<!--放大镜-->
									<script type="text/javascript">
										$(document).ready(function() {
											$(".jqzoom").imagezoom();
											$("#thumblist li a").click(function() {
												$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
												$(".jqzoom").attr('src', $(this).find("img").attr("mid"));
												$(".jqzoom").attr('rel', $(this).find("img").attr("big"));
											});
										});
									</script>
									<div class="tb-booth tb-pic tb-s310 product-album-preview">
										<a><img src="<%=product.product_img%>" alt="产品图片" rel="<%=product.product_img%>" class="jqzoom" /></a>
									</div>
									<div class="product-album-list">
										<ul class="tb-thumb clearfix product-album-list" id="thumblist">
											<% var imglist=[]%>
											<% imglist=product.product_imglist.split('|')%>
											<%for(i=0;i<imglist.length;i++){%>
												<%if(i==0){%>
													<li class="tb-selected">
													<%}else{%>
														<li>
														<%}%>											
												<div class="tb-pic tb-s40">
													<a href="javascript:void(0);"><img src="<%=imglist[i]%>" mid="<%=imglist[i]%>" big="<%=imglist[i]%>"></a>
												</div>
											</li>
											<%}%>
										</ul>
									</div>

								</div>
							</div>
							<!--产品的详细内容-->
							<div class="product_main">
								<!--标题内容-->
								<div class="product_titles">
									<h2><%=product.product_name%></h2>
								</div>
								<!--商品基本信息-->								
									<div id="product_information" class="product_information">
									<!--商品价格 and商品评分-->									
									<div class="product-concerns clearfix">
										<ul>
											<li class="redbg clearfix">
												<div class="priceBox fl">
													<span class="priceB01">售价：</span>
													<span class="priceB02">
            											<ins class="action-price">￥<%=product.new_price%></ins>
            										</span>
												</div>
												<div class="market-price fl">
													<span class="priceA01">市场售价：</span>
													<span class="priceA02"><i class="minor"><del class="action-mktprice">￥<%=product.old_price%></del></i></span>
												</div>
												<!--积分-->
												<div class="score fr">
													<div class="scoreNum">
														<%=parseInt(product.new_price)%>
													</div>
													<div>
														送积分
													</div>
												</div>
											</li>
											<li class="clearfix">
												<ul class="ind-panel">
													<li class="ind-item rbr width30">
														<p class="tm-count">191</p>
														<p class="tm-label">已浏览</p>
													</li>
													<li class="ind-item rbr width30">
														<p class="tm-count"><span class="tm-label">商品重量：</span>200克</p>
														<p class="tm-label">重量计算规则>></p>
													</li>
													<li class="ind-item width40">
														<p class="tm-count"><span class="tm-label">货品编号：</span>4560401460361</p>
														<p class="tm-label"><span class="tm-label">品牌：</span>
															<a target="_blank" href="/brand-521.html">QUALITY FIRST</a>
														</p>
													</li>
												</ul>

											</li>
											<li></li>
											<li class="item clearfix">
												<span class="label fl">
            										限额配送:
            									</span>
												<span class="detail fl">
            										自营转运（包税） 
            									</span>
											</li>
										</ul>
									</div>
									<!--赠品和促销-->
									<div class="product-promotion clearfix">
										<em class="label_alert">包邮</em><span class="name">本商品参加 [3件包邮] 活动，所有参加此活动的商品任选3件，即可免除运费</span>
									</div>
									<!--购买区-->
									<!--表单提交数据-->
									<input type="hidden" name="product_Id" id="product_Id" value="<%=product.product_Id%>" />
									<div class="product-buy">
										<!--商品规格-->
										<div class="product_action">
											<ul>
												<!--库存-->
												<li class="product-buy-quantity">
													<label class="item-label">数量：</label>
													<span class="item-content"><span class="p-quantity"><input type="button" value="-" id="min" class="btn-decrease"/><input type="text" id="input_box" name="goods_num" class="action-quantity-input" value="1"><input type="button" value="+" id="max" class="btn-increase" /></span>
													<span class="p-store">库存充足</span>
													<!--库存-->
													<input class="product_amount" type="hidden" name="stock" value="<%=product.product_amount%>"></span>
												</li>

												<!--购买按钮-->
												<li class="product-buy-action">
													<button type="button" class="btn action-buynow btn1"></button>
													<button type="button" class="btn action-addtocart btn1"></button>
												</li>
											</ul>
										</div>
									</div>
									</div>								
                                <!--产品的详细内容结束-->
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 内容结束-->
			<!--产品详细-->
			<div id="pro_info" class="clearfix">
				<div id="pro_list" class="fl">
					<div class="pro_list_item">
						<div class="title">
							<h3>买了又买</h3>
						</div>
						<div class="pro_ls">
							<ul>
								<li>
									<div class="pro_ls_img">
										<img src="/img/product/pro_left_list01.png" />
									</div>
									<div class="pro_ls_price">
										<h6><a href="#">产品标题</a></h6>
										<p>￥900</p>
									</div>
								</li>
								<li>
									<div class="pro_ls_img">
										<img src="/img/product/pro_left_list01.png" />
									</div>
									<div class="pro_ls_price">
										<h6><a href="#">产品标题</a></h6>
										<p>￥900</p>
									</div>
								</li>
								<li>
									<div class="pro_ls_img">
										<img src="/img/product/pro_left_list01.png" />
									</div>
									<div class="pro_ls_price">
										<h6><a href="#">产品标题</a></h6>
										<p>￥900</p>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="pro_list_item">
						<div class="title">
							<h3>一周销售排行</h3>
						</div>
						<div class="pro_ls">
							<ul>
								<li>
									<div class="pro_ls_img">
										<img src="/img/product/pro_left_list01.png" />
									</div>
									<div class="pro_ls_price">
										<h6><a href="#">产品标题</a></h6>
										<p>￥900</p>
									</div>
								</li>
								<li>
									<div class="pro_ls_img">
										<img src="/img/product/pro_left_list01.png" />
									</div>
									<div class="pro_ls_price">
										<h6><a href="#">产品标题</a></h6>
										<p>￥900</p>
									</div>
								</li>
								<li>
									<div class="pro_ls_img">
										<img src="/img/product/pro_left_list01.png" />
									</div>
									<div class="pro_ls_price">
										<h6><a href="#">产品标题</a></h6>
										<p>￥900</p>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="pro_title" class="fr">
					<!--产品详情标题-->
					<div class="product-tags">
						<h2 class="tags_hd pd_details active"><a href="javascript:void(0);">商品详情</a></h2>
						<h2 class="tags_hd pd_comments"><a href="javascript:void(0);">商品评论</a></h2>
						<h2 class="tags_hd pd_consult"><a href="javascript:void(0);">商品咨询</a></h2>
						<h2 class="tags_hd pd_question"><a href="javascript:void(0);">常见问题</a></h2>
					</div>
					<!--产品详情-->
					<a name="pd_details"></a>
					<div class="product_section">
						<!--商品介绍-->
						<div class="product-attributes">
							<div class="mod_title">
								<ul class="clearfix">
									<li>品牌：
										<a href="#">Fracora</a>
									</li>
									<li>所属分类：排毒养颜</li>
								</ul>
							</div>
							<div class="top_img">
								<img src="/img/product/banner_01.png" />
							</div>
							<div class="top_pro_banner">
								<img src="/img/product/shangpinjieshao.png" />
							</div>
							<div class="pro_detail">
								<p class="title01">商品信息 / Product Information</p>
								<%-product.product_detail%>
								<!--<p class="title01">商品特点 / Product Features</p>
								<p class="content01">内容</p>
								<p class="title01">商品展示 / Product Photos</p>
								<p class="content01">内容</p>
								<p class="title01">使用说明 / Instructions</p>
								<p class="content01">内容</p>-->
							</div>

						</div>

						<!--商品评论-->
						<div class="product_comment_init">
							<div class="mod_title txt_lf">
								<h2>商品评论</h2>
							</div>
							<div class="comments_list">
								<div class="comment_title">
									商品评分：
								</div>
								<div class="title">
									共29人评价,
									<a href="#">查看全部评论</a>
								</div>
								<div class="action_comment_list">
									<ul>
										<!--评论单项开始-->
										<li class="comment_item">
											<div class="clearfix">
												<!--评论-->
												<div class="comment_item_left fl">
													<!--头像-->
													<div class="comment_item_header">
														<img src="/img/header/header01.png" />
														<h2>张三</h2>
													</div>
												</div>
												<div class="comment_item_right fl">
													<div class="comment_item_hh">
													</div>
													<div class="comment_item_hhh">

													</div>
													<!--评论内容-->
													<div class="comment_item_content_list">
														<div class="comment_star">
															<i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
														</div>
														<div class="comment_item_action_content">
															评论内容
														</div>
														<div class="comment_item_action_img">
															<ul>
																<li>
																	<img src="/img/comment/com_01.png" />
																</li>
																<li>
																	<img src="/img/comment/com_01.png" />
																</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
										</li>
										<!--评论单项结束-->
										<!--评论单项开始-->
										<li class="comment_item">
											<div class="clearfix">
												<!--评论-->
												<div class="comment_item_left fl">
													<!--头像-->
													<div class="comment_item_header">
														<img src="/img/header/header01.png" />
														<h2>张三</h2>
													</div>
												</div>
												<div class="comment_item_right fl">
													<div class="comment_item_hh">
													</div>
													<div class="comment_item_hhh">

													</div>
													<!--评论内容-->
													<div class="comment_item_content_list">
														<div class="comment_star">
															<i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
														</div>
														<div class="comment_item_action_content">
															评论内容
														</div>
														<div class="comment_item_action_img">
															<ul>
																<li>
																	<img src="/img/comment/com_01.png" />
																</li>
																<li>
																	<img src="/img/comment/com_01.png" />
																</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
										</li>
										<!--评论单项结束-->
										<!--评论单项开始-->
										<li class="comment_item">
											<div class="clearfix">
												<!--评论-->
												<div class="comment_item_left fl">
													<!--头像-->
													<div class="comment_item_header">
														<img src="/img/header/header01.png" />
														<h2>张三</h2>
													</div>
												</div>
												<div class="comment_item_right fl">
													<div class="comment_item_hh">
													</div>
													<div class="comment_item_hhh">

													</div>
													<!--评论内容-->
													<div class="comment_item_content_list">
														<div class="comment_star">
															<i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
														</div>
														<div class="comment_item_action_content">
															评论内容
														</div>
														<div class="comment_item_action_img">
															<ul>
																<li>
																	<img src="/img/comment/com_01.png" />
																</li>
																<li>
																	<img src="/img/comment/com_01.png" />
																</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
										</li>
										<!--评论单项结束-->
									</ul>
								</div>
							</div>
						</div>
						<!--商品咨询-->
						<div class="product_consult_init">
							<div class="mod_title txt_lf">
								<h2>商品咨询</h2>
							</div>
							<div class="pro_detail">

							</div>
						</div>
						<!--常见问题-->
						<div class="good_dtl_box">
							<img src="/img/product/banner_02.png" />
						</div>
					</div>
				</div>
			</div>
			<!--产品详细结束-->
			<div class="none">

			</div>
			<!--footer开始-->
			<!--在线客服-->
            <div class="online_service_panel">
            	<a href="/service/service_online" target="_blank"><img src="/img/online_service/robot.jpg"/></a>
            	<a href="/service/service_online" target="_blank">在线客服</a>
            </div>
            <!--在线客服结束-->
			<!--应用网页模板-->
			<% include ../template/footer.html %>
			<!--footer结束-->
		</div>
	</body>

</html>